<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #di{
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      top: 100px;
      left: 0;
      opacity: 0.2;
    }
    #di1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 300px;
      left: 0;
      opacity: 0.2;
    }
  </style>
</head>
<body>
  <!-- 2s，方块移动500 -->
  <input type="button" value="按钮" id="btn">
  <input type="button" value="停止" id="btn1">

  <div id="di"></div>

  <script>
  
    var btn = document.getElementById("btn");
    var btn1 = document.getElementById("btn1");
    var di = document.getElementById("di");

      // 补充 获取计算后属性的样式
    
    console.dir(window.getComputedStyle(di));
    console.dir(window.getComputedStyle(di).width);
    console.dir(window.getComputedStyle(di).opacity);
    console.dir(window.getComputedStyle(di)['opacity']);
    console.log(di.style);

    // 参数
      // 1.元素对象
      // 2.结束位置
      // 3总时间
      animate(di,{left:400,width:500,height:300,opacity:1,backgroundColor:"rgb(255,0,0)"},2000)
    function animate(ele,end,time) {
      // 已知 结束位置，时间间隔50 开始位置缺少
      // 开始位置要根据结束位置的属性来获取
      // 起始位置是一个对象，key要一一对应
      var now = {};
      //end的对象遍历，获取属性名
      for (var key in end){
        if (key === "backgroundColor") {
          now[key] = window.getComputedStyle(ele)[key];
          console.log(key);
        }else{
          now[key] = parseFloat(window.getComputedStyle(ele)[key]);//去掉单位
        }
        
      } 
      // 时间间隔
      var interval = 50;
      // 运动的总次数
      var maxCount = time/interval;
    // 对象的每一个属性都需要步长，可以将步长放到一个对象中
    var step = {};
    // 遍历结束对象，计算每一个的步长
    for (var key in end){
      if (key !=="backgroundColor" ) {
        step[key] = (end[key]-now[key])/maxCount
        console.log(key);
      }
    }
    // 定义次数累加
    var count = 0;
    ///////////////////////////////////////////////////////////////////////////////////////
    //                                                                                   //
    //////////////////////////////////////////////////////////////////////////////////////
    var set;
    set = window.setInterval(function () {
      // 每个属性的改变
      for(var key in end){
        if (key !== "backgroundColor" ) {
          now[key] +=step[key] ;
          console.log(key);
        }
      }
      console.log(now["backgroundColor"] );
      var r = getRandomIntInclusive(0,255);
      var g = getRandomIntInclusive(0,255);
      var b = getRandomIntInclusive(0,255);
      // if (now["backgroundColor"]) {
      //   now["backgroundColor"] ='rgb(' + r +','+ g +','+ b +')';
      // }
      // now["backgroundColor"]&&(now["backgroundColor"] = 'rgb(' + r +','+ g +','+ b +')' )
      now['backgroundColor'] &&  (now['backgroundColor'] = 'rgb(' + r + ','+ g + ',' + b + ')')
      // now["backgroundColor"] ='rgb(' + r +','+ g +','+ b +')';
      count++;
      // 判断定时结束
      if (count >= maxCount) {
        for(var key in end){
          now[key] = end[key];
        }
        clearInterval(set);
      }
      for(var key in now){
        if (key === "opacity" || key ==="backgroundColor") {
          ele.style[key] = now[key];
        }else{
          ele.style[key] = now[key]+"px";
        }
      }
    },interval)
    }
    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }

  </script>
</body>
</html>